<template>
	<view class="container">
		<!-- 订单提示 -->
		<view class="order-tip">
			<view class="order-input">
				<input type="text" v-model="orderNumber" placeholder="请填写正确的订单号之后进行认领" placeholder-class="placeholder" />
			</view>
			<view class="claim-btn" @click="claimOrder">
				<u-icon name="search" color="#ffffff" size="28"></u-icon>
				<text>订单认领</text>
			</view>
		</view>
		<!-- 用户须知 -->
		<view class="user-notice">
			<text class="notice-title">用户须知：</text>
			<view class="notice-item">
				<text>1.购买后立刻复制抖音订单号填写，进行认领订单追踪（不认领 无补贴）</text>
			</view>
			<view class="notice-item">
				<text>2.确认收货后，可以进行领取补贴。</text>
			</view>
			<view class="notice-item">
				<text>3.领取完成后，可以去我的钱包进行金额提现。</text>
			</view>
			<view class="notice-item">
				<text>4.凡是差评，联系商家，提前确认收货将进行拉黑处理。</text>
			</view>
		</view>
		
		<!-- 订单状态选项卡 -->
		<view class="order-tabs">
			<view class="tab-item" @click="switchTab('')" :class="!query.status ? 'active' : ''">
				<text>全部</text>
				<view class="active-line" v-if="!query.status"></view>
			</view>
			<view class="tab-item" @click="switchTab(1)" :class="query.status == 1 ? 'active' : ''">
				<text>待领取补贴</text>
				<view class="active-line" v-if="query.status == 1"></view>
			</view>
			<view class="tab-item" @click="switchTab(2)" :class="query.status == 2 ? 'active' : ''">
				<text>已领取补贴</text>
				<view class="active-line" v-if="query.status == 2"></view>
			</view>
			<view class="tab-item" @click="switchTab(3)" :class="query.status == 3 ? 'active' : ''">
				<text>已失效</text>
				<view class="active-line" v-if="query.status == 3"></view>
			</view>
		</view>
		<!-- 订单列表 -->
		<view class="order-list">
			<!-- 订单项 -->
			<view class="order-item" v-for="(item, index) in list" :key="index">
				<view class="order-header">
					<view class="order-number">
						<text>订单号：{{ item.orderId }}</text>
					</view>
					<view class="order-status status-passed" v-if="item.status == 1">
						<text>待领取</text>
					</view>
					<view class="order-status" v-if="item.status == 2">
						<text>已领取</text>
					</view>
					<view class="order-status status-expired" v-if="item.status == 3">
						<text>已失效</text>
					</view>
					<view class="order-status status-passed" v-if="item.status == 4">
						<text>已支付</text>
					</view>
					<view class="order-status" v-if="item.status == 5">
						<text>已收货</text>
					</view>
				</view>
				<view class="order-content">
					<view class="product-image">
						<image :src="item.goodsThumbnailUrl" mode="aspectFill"></image>
					</view>
					<view class="product-info">
						<view class="product-title">
							<text>{{ item.goodsName }}</text>
						</view>
						<view class="order-time">
							<text>{{ item.orderPayTimeStr }}</text>
						</view>
					</view>
				</view>
				<view class="order-footer">
					<view class="price-info">
						<text class="price-label">付款</text>
						<text class="price-value">¥{{ item.orderAmount }}</text>
						<text class="subsidy-label">补贴</text>
						<text class="subsidy-value">¥{{ item.userPromotionAmount }}</text>
					</view>
					<view class="action-btn" v-if="item.userPromotionAmount && item.status == 1" @click="claimSubsidy(item.id, index)">
						<text>领取补贴</text>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="'loading'" fontSize="24" iconSize="30" v-if="listLoading"/>
		<u-empty v-if="!listLoading && total <= 0" mode="data" text="收益记录为空" textSize="24" iconSize="120"></u-empty>
	</view>
</template>

<script>
	import listMixin from '@/common/list.js'
	export default {
		mixins: [listMixin],
		data() {
			return {
				title: '我的订单',
				orderNumber: '',
				query: {
					status: ''
				},
				queryUrl: "/order/accountUserClaimOrderInfoRecord"
			}
		},
		methods: {
			getUserInfo() {
				this.request("get", "/order/accountInfo").then(res => {
					this.$store.commit("common/setUserInfo", res.data || {});
				})
			},
			// 切换标签
			switchTab(tab) {
				this.query.status = tab;
				this.getList(true);
			},
			// 认领订单
			claimOrder() {
				const that = this;
				if (!that.orderNumber) {
					return that.showMsg("请输入订单号")
				}
				that.request("post", "/app/order/mall/channel/douyinM2schannelOrderList", {
					orderId: that.orderNumber,
					...this.query
				}).then(res => {
					if (res.code != 0) {
						return that.showMsg(res.msg)
					}
					that.orderNumber = ""
					uni.showModal({
						title: "提示",
						content: "领取补贴成功",
						showCancel: false,
						success() {
							that.getList(true)
						}
					})
				})
			},
			// 领取补贴
			claimSubsidy(orderId, index) {
				this.request("post", "/order/claimCommission", {
					orderId
				}).then(res=> {
					if (res.code != 0) {
						return this.showMsg(res.msg)
					}
					this.list[index].status = 2
					uni.showToast({
						title: res.msg || '领取补贴成功',
						icon: 'success'
					});
					this.getUserInfo()
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		min-height: calc(100vh - var(--window-bottom));
		background-color: #f5f5f5;
		position: relative;
		padding-top: 20rpx;
		box-sizing: border-box;
	}
	
	
	/* 订单提示 */
	.order-tip {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}
	
	.order-input {
		flex: 1;
		margin-right: 20rpx;
	}
	
	.order-input input {
		width: 100%;
		height: 70rpx;
		border: 1px solid #ddd;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 24rpx;
		box-sizing: border-box;
	}
	
	.placeholder {
		color: #999;
		font-size: 28rpx;
	}
	
	.claim-btn {
		display: flex;
		align-items: center;
		background-color: #ff4d4f;
		color: #fff;
		padding: 10rpx 30rpx;
		border-radius: 50rpx;
		flex-shrink: 0; /* 防止按钮被压缩 */
		justify-content: center; /* 内容居中 */
	}
	
	/* 调整u-icon与文字的间距 */
	.claim-btn u-icon {
		margin-right: 10rpx;
	}
	
	/* 用户须知 */
	.user-notice {
		padding: 30rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
	}
	
	.notice-title {
		font-weight: bold;
		margin-bottom: 20rpx;
		display: block;
	}
	
	.notice-item {
		margin-bottom: 10rpx;
		font-size: 28rpx;
		color: #666;
	}
	
	/* 订单状态选项卡 */
	.order-tabs {
		display: flex;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}
	
	.tab-item {
		flex: 1;
		text-align: center;
		padding: 30rpx 0;
		position: relative;
		font-size: 28rpx;
	}
	
	.active {
		color: #ff4d4f;
		font-weight: bold;
	}
	
	.active-line {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 6rpx;
		background-color: #ff4d4f;
		border-radius: 3rpx;
	}
	
	/* 订单列表 */
	.order-list {
		padding: 20rpx;
	}
	
	.order-item {
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
	}
	
	.order-header {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		border-bottom: 1px solid #f5f5f5;
	}
	
	.order-number {
		font-size: 26rpx;
		color: #666;
	}
	
	.order-status {
		font-size: 26rpx;
	}
	
	.status-passed {
		color: #52c41a;
	}
	
	.status-expired {
		color: #ff4d4f;
	}
	
	.order-content {
		display: flex;
		padding: 20rpx;
		border-bottom: 1px solid #f5f5f5;
	}
	
	.product-image {
		width: 160rpx;
		height: 160rpx;
		margin-right: 20rpx;
		border-radius: 8rpx;
		overflow: hidden;
	}
	
	.product-image image {
		width: 100%;
		height: 100%;
	}
	
	.product-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.product-title {
		font-size: 28rpx;
		line-height: 1.4;
		margin-bottom: 10rpx;
	}
	
	.order-time {
		font-size: 24rpx;
		color: #999;
	}
	
	.order-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
	}
	
	.price-info {
		display: flex;
		align-items: center;
	}
	
	.price-label, .subsidy-label {
		font-size: 26rpx;
		color: #666;
		margin-right: 10rpx;
	}
	
	.price-value {
		font-size: 30rpx;
		font-weight: bold;
		margin-right: 30rpx;
	}
	
	.subsidy-value {
		font-size: 30rpx;
		font-weight: bold;
		color: #ff4d4f;
	}
	
	.action-btn {
		background-color: #ff4d4f;
		color: #fff;
		padding: 10rpx 30rpx;
		border-radius: 50rpx;
		font-size: 28rpx;
	}
	
	/* 底部导航和分页控制样式已移除 */
	
	/* 图标字体 */
	.iconfont {
		font-family: "iconfont";
	}
</style>
